Estrutura
O sistema já é responsivo e segue a mesma estrutura desta página, ele é dividido blocos, sendo que alguns são opcionais.
- Header
- Menu
- Left (Opcional)
- Wrapper/Content
- Footer
E estes devem ser organizado da seguinte maneira:
<body>
<div id="header"></div>
<div id="left"></div>
<div id="wrapper">
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
Header
É no Header que temos a estrutura do Menu:
<div id="header">
<a href="index.php" class="icone-2im">
<img src="_assets/images/logo-branca.png">
</a>
<a href="#" class="abre-menu"><i class="fa fa-bars"></i> <span>Menu</span></a>
<div id="menu">
<ul>
<li class="active"><a href="index.php" class="tip" title="Página Inicial"><i class="fal fa-fw fa-home-alt"></i><span>Página Inicial</span></a></li>
<li><a href="como-comecar.php" class="tip" title="Como Começar?"><i class="fal fa-fw fa-flag-alt"></i><span>Como Começar?</span></a></li>
<li><a href="estrutura.php" class="tip" title="Estrutura"><i class="fal fa-fw fa-columns"></i><span>Estrutura</span></a></li>
<li><a href="componentes.php" class="tip" title="Componentes"><i class="fal fa-fw fa-code"></i><span>Componentes</span></a></li>
</ul>
</div>
<div class="dropdown user-menu">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="<?php echo $BASEURL;?>_assets/images/user.png" alt="Carolina Mendes" class="rounded avatar" width="40">
<span>Carolina Mendes</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Carolina Mendes</h6></li>
<li><a class="dropdown-item" href="usuario.php"><i class="fal fa-fw fa-id-card me-3"></i>Meus Dados</a></li>
<li><a class="dropdown-item" href="#"><i class="fal fa-fw fa-lightbulb-on me-3"></i>Algum link</a></li>
<li><div class="dropdown-divider"></div></li>
<li><a class="dropdown-item" href="<?php echo $BASEURL;?>index.php"><i class="fal fa-fw fa-power-off me-3"></i>Sair</a></li>
</ul>
</div>
</div>
Left
Este bloco é opcional, porém caso deseje utiliza-lo, devemos adicionar a classe .left no #wrapper
<div id="left">
<a href="#" class="abre-left btn btn-primary"><i class="fal fa-angle-right"></i></a>
<div class="overflow-left">
...
</div>
</div>
Footer
<div id="footer">
<div class="container">
<div class="small py-3 text-muted text-center">
2011 - 2021 Todos os direitos reservados à <a href="https://www.2im.com.br" target="_blank" class="text-dark">2iM® Inteligência Médica S/A</a>.
</div>
</div>
</div>
A estrutura é essa!. Agora podemos prosseguir para os componentes.